<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible;
}

.ui-widget {
	font-size: 9px !important;
}

.centro {
	top: 50%
}

.tabela {
	width: 700px;
}

.size {
	width: 700px;
	position: absolute;
	left: 20%;
	top: 10%;
}
</style>
	<title>Cadastro de Participante</title>
</h:head>

<h:body>

	<ui:decorate template="/templateBase.xhtml">
		<ui:define name="center">
			<p:growl id="growl" life="3000" />
			<h:form id="formCadParticipante" acceptcharset="ISO-8859-1" lang="pt">
				<br />
				<br />
				<br />
				<p:panel styleClass="size" header="Cadastro de Participante"
					footer="Integração - Portal de Serviços e Comunicação"
					id="pnlDados">
					<br />
					<h:panelGrid id="grifDados">

						<h:outputText value="Evento:" />

						<h:panelGrid columns="3">
							<p:inputText size="6" value="#{eventoBacking.evSalvar.id}"
								id="txtId" />
							<p:inputText size="64" readonly="true" id="txtNomeEvento"
								value="#{eventoBacking.evSalvar.nomeEvento}" />
							<p:commandButton icon="ui-icon-search"
								onclick="dlgPesquisa.show()" update=":formPesquisa" />
						</h:panelGrid>

						<h:outputText value="CPF:" />
						<p:inputMask mask="999.999.999-99" id="inputCpf" size="30"
							required="true" requiredMessage="CPF Inválido"
							value="#{eventoBacking.cpfDigitado}">

							<p:ajax listener="#{eventoBacking.validaCPF}" event="blur"
								update=":growl,inputCpf, formCadParticipante" />

							<p:ajax listener="#{eventoBacking.carregaDadosParticipante}"
								event="blur" update=":formCadParticipante" process="@all" />

						</p:inputMask>

						<h:outputText value="Nome do Participante:" />
						<p:inputText size="70" value="#{eventoBacking.partSalvar.nome}"
							id="txtNome" required="true"
							requiredMessage="Informe o nome do participante!" />

						<h:outputText value="E-mail:" />
						<p:inputText size="60" required="true" id="txtEmail"
							validatorMessage="O e-mail informado não é válido!"
							value="#{eventoBacking.partSalvar.email}"
							requiredMessage="Informe um e-mail válido!">
							<f:validateRegex
								pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
						</p:inputText>

						<h:outputText value="Forma de Participação:" />
						<p:selectOneMenu value="#{eventoBacking.codTipoPartSelecionada}"
							required="true"
							requiredMessage="Informe a forma de participação!">
							<f:selectItem itemLabel="Selecione" itemDisabled="true" />
							<f:selectItems value="#{eventoBacking.listaTipoParticipacao}"
								var="t" itemLabel="#{t.descricao}" itemValue="#{t.id}" />
						</p:selectOneMenu>

						<h:outputText value="C.H:" />
						<p:inputText size="10" value="#{eventoBacking.cargaHoraria}" />

					</h:panelGrid>
					<br />
					<p:dataTable paginator="true" rows="10" id="tblParticipantes"
						value="#{eventoBacking.listaParticipantes}" var="pe">

						<p:column headerText="CPF">
							<div align="center">
								<h:outputText value="#{pe.participante.cpf}" />
							</div>
						</p:column>

						<p:column headerText="Nome">
							<h:outputText value="#{pe.participante.nome}" />
						</p:column>

						<p:column headerText="E-mail">
							<div align="center">
								<h:outputText value="#{pe.participante.email}" />
							</div>
						</p:column>

						<p:column headerText="Tipo de Participação">
							<div align="center">
								<h:outputText value="#{pe.tipo.descricao}" />
							</div>
						</p:column>

						<p:column headerText="C.H">
							<div align="center">
								<h:outputText value="#{pe.cargaHoraria}" />
							</div>
						</p:column>

						<p:column headerText="Excluir">
							<div align="center">
								<p:commandButton oncomplete="dlgConfirmacao.show()"
									icon="ui-icon-cancel"
									actionListener="#{eventoBacking.selecionaPartEvento(pe)}" />
							</div>
						</p:column>

					</p:dataTable>
					<p:separator />
					<br />
					<div align="center">
						<h:panelGrid columns="2">
							<p:commandButton value="Salvar" icon="ui-icon-check"
								actionListener="#{eventoBacking.salvaParticipanteEvento()}"
								ajax="false" update=":formCadParticipante" />
							<p:commandButton value="Limpar" icon="ui-icon-cancel" />
						</h:panelGrid>
					</div>

				</p:panel>
			</h:form>

			<p:dialog header="Pesquisa Eventos" widgetVar="dlgPesquisa"
				showEffect="clip" hideEffect="clip" closable="true"
				footer="Integração - Portal de Serviços e Comunicação" width="600"
				height="300">
				<h:form id="formPesquisa">

					<p:dataTable value="#{eventoBacking.listaEventos}" var="e"
						id="tblPesquisa" rows="10">

						<p:column headerText="ID">
							<h:outputText value="#{e.id}" />
						</p:column>

						<p:column headerText="Nome do Evento">
							<h:outputText value="#{e.nomeEvento}" />
						</p:column>

						<p:column headerText="Curso">
							<h:outputText value="#{e.curso.nome}" />
						</p:column>

						<p:column headerText="Local">
							<h:outputText value="#{e.localEvento.descricao}" />
						</p:column>

						<p:column>
							<p:commandButton icon="ui-icon-check"
								actionListener="#{eventoBacking.selecionaEvento(e)}"
								oncomplete="dlgPesquisa.hide()" update=":formCadParticipante" />
						</p:column>

					</p:dataTable>
				</h:form>
			</p:dialog>

			<p:dialog width="250" height="100" header="Confirmação"
				showEffect="clip" hideEffect="clip" widgetVar="dlgConfirmacao"
				closable="true"
				footer="Integração - Portal de Serviços e Comunicação">
				<h:form>

					<br />
					<h:outputText value="Deseja realmente excluir esta informação?" />
					<br />
					<br />
					<br />
					<div align="center">
						<h:panelGrid columns="2">
							<p:commandButton value="Sim"
								actionListener="#{eventoBacking.deletaParticipante}"
								ajax="false" update="tblParticipantes" />
							<p:commandButton value="Não" oncomplete="dlgConfirmacao.hide()" />
						</h:panelGrid>
					</div>
				</h:form>
			</p:dialog>

		</ui:define>
	</ui:decorate>
</h:body>
</html>